import { Table } from "antd";
import React from "react";
import qs from "qs";
const columns = [
  {
    title: "Name",
    dataIndex: "name",
    sorter: true,
    render: (name) => `${name.first} ${name.last}`,
    width: "20%",
  },
  {
    title: "Gender",
    dataIndex: "gender",
    filters: [
      { text: "Male", value: "male" },
      { text: "Female", value: "female" },
    ],
    width: "20%",
  },
  {
    title: "Email",
    dataIndex: "email",
  },
];

const getRandomuserParams = (params) => ({
  results: params.pagination.pageSize,
  page: params.pagination.current,
  ...params,
});

class ReactRedux extends React.Component {
  state = {
    data: [],
    pagination: {
      current: 1,
      pageSize: 10,
      onChange: (page, size) => this.pageChange(page, size),
      onShowSizeChange: (current, size) => this.pageSizeChange(current, size),
    },
    loading: false,
  };

  componentDidMount() {
    const { pagination } = this.state;
    this.fetch({ pagination });

    const qsparse = qs.parse("{name: 'xxx'}")
    const qsstringify = qs.stringify({name: 'xxx'})
    console.log('qsparse:',qsparse,'qsstringify:',qsstringify)
    // const jsonparse = JSON.parse("{name: 'xxx'}")
    const jsonstringify = JSON.stringify({name: 'xxx'})
    console.log('jsonstringify:',jsonstringify)
  }

  // componentWillReceiveProps(pre, curr) {
  //   console.log('componentWillReceiveProps>>>>>>>>>',pre, curr)
  // }
  // shouldComponentUpdate() {
  //   console.log('shouldComponentUpdate>>>>>>>>>>>>>',)
  // }
  pageSizeChange = (current, size) => {
    console.log(22222222,current, size);
  };
  pageChange = (page, size) => {
    console.log(1111111111,page, size);

  };
  handleTableChange = (pagination, filters, sorter) => {
    this.fetch({
      sortField: sorter.field,
      sortOrder: sorter.order,
      pagination,
      ...filters,
    });
  };

  
  fetch = (params = {}) => {
    this.setState({ loading: true });
    fetch(
      `https://randomuser.me/api?${qs.stringify(getRandomuserParams(params))}`
    )
      .then((res) => res.json())
      .then((data) => {
  
        this.setState({
          loading: false,
          data: data.results,
          pagination: {
            ...params.pagination,
            total: 200,
            // 200 is mock data, you should read it from server
            // total: data.totalCount,
          },
        });
      });
  };

  render() {
    const { data, pagination, loading } = this.state;
    return (
      <Table
        columns={columns}
        rowKey={(record) => record.login.uuid}
        dataSource={data}
        pagination={pagination}
        loading={loading}
        onChange={this.handleTableChange}
      />
    );
  }
}
export default ReactRedux;
